<template>
  <div class="data-filter-container">
    <div class="filter-bar" style="width: 1500px">
      <el-form :model="filterForm" class="filter-form">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="采购单号">
              <el-input
                v-model="filterForm.purchaseOrderNumber"
                placeholder="请输入采购单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品编号">
              <el-input
                v-model="filterForm.manufacturerCode"
                placeholder="请输入产品编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称">
              <el-input
                v-model="filterForm.productName"
                placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              @click="searchProducts"
              class="filter-button"
              >查询</el-button
            >
            <el-button @click="resetFilter" class="reset-button"
              >重置</el-button
            >
            <el-button @click="refillData" class="refill-button"
              >反填数据</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-list-bar">
      <span>数据列表</span>
      <el-checkbox-group v-model="selectedRows">
        <div class="button-container">
          <el-button @click="add()" type="primary">新增</el-button>
          <el-button>编辑</el-button>
          <el-button
            type="danger"
            @click="dels()"
            :disabled="selectedRows.length === 0"
            >批量删除</el-button
          >
          <el-button @click="handleRefresh">刷新</el-button>
          <el-button @click="handleExport">导出</el-button>
        </div>
      </el-checkbox-group>
    </div>
    <el-table
      :data="dataList"
      border
      class="data-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="编号" prop="productId"></el-table-column>
      <el-table-column
        label="订单号"
        prop="purchaseOrderNumber"
      ></el-table-column>
      <el-table-column label="产品名称" prop="productName"></el-table-column>
      <el-table-column
        label="产品编号"
        prop="manufacturerCode"
      ></el-table-column>
      <el-table-column label="产品规格" prop="specification"></el-table-column>
      <el-table-column label="单价" prop="price"></el-table-column>
      <el-table-column label="数量" prop="quantity"></el-table-column>
      <el-table-column label="总额" prop="totalPrice"></el-table-column>
      <el-table-column
        label="供应商编号"
        prop="manufacturerCode"
      ></el-table-column>
      <el-table-column label="供应商" prop="supplierName"></el-table-column>
      <el-table-column label="订单总额" prop="orderTotal"></el-table-column>
      <el-table-column label="状态" prop="billType"></el-table-column>
      <el-table-column label="退货" prop="isReturned"></el-table-column>
      <el-table-column v-slot="scoped" label="创建时间" prop="makeTime">
        {{ scoped.row.makeTime.substring(0, 10) }}</el-table-column
      >
    </el-table>

    <el-pagination
      v-model:current-page="form1.PageIndex"
      v-model:page-size="form1.PageSize"
      :page-sizes="[1, 3, 15, 100]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form1.TotalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox, ElTable, ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
import axios from "axios";
import { Plus } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import { KongaUrl } from "@/axios/axiosHelp";
const router = useRouter();
// 筛选表单数据
const filterForm = reactive({
  manufacturerCode: "",
  purchaseOrderNumber: "",
  productName: "",
  orderStatus: "all",
});

// 数据列表
const dataList = ref([]);
const form1 = reactive({
  TotalCount: 0,
  PageCount: 0,
  PageSize: 5,
  PageIndex: 1,
});
const handleSizeChange = (newSize) => {
  form1.PageSize = newSize;
  searchProducts();
};
const add = () => {
  router.push("/AddPurchasing");
};
const handleCurrentChange = (newPage) => {
  form1.PageIndex = newPage;
  searchProducts();
};
onMounted(() => {
  searchProducts();
});
const searchProducts = () => {
  KongaUrl
    .get("/wangcong/api/Whouase/GetPurchases", {
      params: {
        PageSize: form1.PageSize,
        PageIndex: form1.PageIndex,
        ManufacturerCode: filterForm.manufacturerCode,
        PurchaseOrderNumber: filterForm.purchaseOrderNumber,
        ProductName: filterForm.productName,
      },
    })
    .then((res) => {
      dataList.value = res.data.data.list;
      form1.TotalCount = res.data.data.totalCount;
      form1.PageCount = res.data.data.PageCount;
    })
    .catch((error) => {
      console.error("获取产品列表失败", error);
    });
};
// 选中的行
const selectedRows = ref<number[]>([]);
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows.map((row) => row.productId); // 直接提取ID
};

//批量删除
const dels = () => {
  if (selectedRows.value.length > 0) {
    ElMessageBox.confirm("是否确认批量删除?", "提示", {
      confirmButtonText: "是",
      cancelButtonText: "否",
      type: "warning",
    }).then(() => {
      KongaUrl
        .delete("/wangcong1/api/WHouase/DelsPurchaseOrder", {
          params: {
            Id: selectedRows.value,
            Table: "ProductModel",
            ziduan: "ProductId",
          },
          paramsSerializer: {
            indexes: null, // 确保数组格式为Id=1&Id=2
          },
        })
        .then((res) => {
          if (res.data.code == 500) {
            ElMessage.success(res.data.message);
            searchProducts();
          } else {
            ElMessage.error(res.data.message);
          }
        });
    });
  }
};

// 重置筛选
const resetFilter = () => {
  (filterForm.manufacturerCode = ""),
    (filterForm.purchaseOrderNumber = ""),
    (filterForm.productName = "");
};

// 批量操作
const batchActions = () => {
  console.log("执行批量操作，选中的行:", selectedRows.value);
  // 这里应添加实际的批量操作逻辑，如调用后端API
};

// 反填数据
const refillData = () => {
  // 假设这里从后端获取特定采购单的数据
  KongaUrl
    .get("/wangcong/api/Whouase/GetSpecificPurchase")
    .then((res) => {
      const data = res.data.data;
      // 反填筛选表单
      filterForm.manufacturerCode = data.manufacturerCode;
      filterForm.purchaseOrderNumber = data.purchaseOrderNumber;
      filterForm.productName = data.productName;
      // 反填表格数据
      dataList.value = [data];
      form1.TotalCount = 1;
      form1.PageCount = 1;
      form1.PageIndex = 1;
      form1.PageSize = 1;
    })
    .catch((error) => {
      console.error("获取特定采购单数据失败", error);
      ElMessage.error("获取特定采购单数据失败，请检查网络或联系管理员");
    });
};
</script>

<style scoped>
.data-filter-container {
  padding: 10px;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.advanced-search {
  color: #409eff;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.filter-button,
.reset-button,
.refill-button {
  margin-left: 10px;
}

.data-list-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.select-all {
  margin-right: 10px;
}

.data-table {
  width: 100%;
  margin-bottom: 10px;
}

.batch-operation-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}

.batch-operation-button {
  margin-right: 10px;
}

.pagination {
  text-align: center;
}
</style>    